<!--
  @Descripttion:：企业介绍预览
  @Author：yejianbo
  @Date：2022年07月30日 20:08:25
-->
<template>
  <el-drawer
    title="企业介绍预览"
    :visible.sync="drawer"
    size="80%"
    :before-close="handleClose"
    direction="rtl"
  >
    <section class="pc-review-page">
      <!-- 公司基本信息  -->
      <div class="company-info">
        <img
          v-if="companyInfo.companyLogo"
          v-imgError
          class="logo-img"
          :src="companyInfo.companyLogo"
          alt="logo-img"
        >
        <img
          v-else
          v-imgError
          class="logo-img"
          src="../../../../assets/images/logo_demo.png"
          alt="logo-img"
        >

        <div class="right-block">
          <div class="name">{{ companyInfo.companyName }}</div>
          <div class="area">{{ companyInfo.industry }}</div>
        </div>
        <div class="right-hire">
          <div class="hire-num">{{ companyInfo.recruitmentCount || 0 }}</div>
          <div class="hire-title">在招职位</div>
          <div class="click-num">点击量：{{ companyInfo.clickCount || 0 }}</div>
        </div>
        <div class="tag">
          <span
            :class="['item', { current: tagType === 0 }]"
          >企业介绍</span>
        </div>
      </div>
      <section v-show="tagType === 0">
        <!-- 热招职位 -->
        <div class="row-item">
          <div class="title">
            热招职位
            <div class="all">
              <span class="all-icon" />查看全部职位
            </div>
          </div>
          <el-empty description="暂无数据" />
        </div>
        <!-- 企业简介 -->
        <div class="row-item">
          <div class="title">{{ companyInfo.companyName }}简介</div>
          <div
            v-if="companyInfo.introduction"
            class="company-desc"
            v-html="companyInfo.introduction.replace(/\n/gm, '<br>')"
          />
          <el-empty v-else description="暂无数据" />
        </div>
        <!-- 企业环境 -->
        <div class="row-item">
          <div class="title">企业环境</div>
          <div
            v-if="Array.isArray(imgVideoList) && imgVideoList.length"
            id="mySwiper"
            class="company-environment swiper"
          >
            <div class="swiper-wrapper">
              <div v-for="(item, index) in imgVideoList" :key="index" class="swiper-slide">
                <div style="width: 500px;height: 280px;">
                  <el-image
                    v-if="item.type == 'img'"
                    :src="item.url"
                    alt=""
                    :preview-src-list="imgList.src"
                    fit="cover"
                    style="width: 500px;height: 280px;"
                  />
                  <vueVideoPlayer
                    v-else
                    :ref="`video${index}`"
                    :src="item.url"
                    @onPlay="videoPlay(index)"
                  />
                  <div
                    v-if="item.updateTime"
                    style="text-align: right; font-size: 12px; color: #000"
                  >
                    更新时间：{{ item.updateTime }}
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-button-prev" @click.stop="slidePrev" />
            <div class="swiper-button-next" @click.stop="slideNext" />
          </div>
          <el-empty v-else description="暂无数据" />
        </div>
        <!-- 企业地址 -->
        <div class="row-item">
          <div class="title">企业地址</div>
          <div
            v-if="
              companyInfo.companyAddress &&
                companyInfo.companyAddress.length > 0
            "
            class="company-address"
          >
            <div
              v-for="(item, index) in companyInfo.companyAddress"
              :key="index"
              class="item"
            >
              <span class="position-icon" />
              {{ item.province }}
              {{ item.city }}
              {{ item.address }}
            </div>
          </div>
          <el-empty v-else description="暂无数据" />
        </div>
      </section>
    </section>
  </el-drawer>
</template>

<script>
import {
  provinceAndCityData,
  studentType,
  educationOptions,
  getEducationName
} from '@/utils/frontDataDict.js'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import vueVideoPlayer from './videoPlayer.vue'
export default {
  name: 'PcReview',
  components: {
    vueVideoPlayer
  },
  data() {
    return {
      provinceAndCityData,
      studentType,
      educationOptions,
      total: 0,
      tagType: 0,
      swiper: null,
      companyInfo: {},
      jobList: [],
      shortJobList: [],
      imgList: [],
      imgVideoList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        education: '',
        studentType: '',
        city: ''
      },
      drawer: false
    }
  },
  methods: {
    handleClose(done) {
      this.imgVideoList.map((item, inx) => {
        if (item.type === 'video') {
          this.$refs[`video${inx}`][0].pause()
        }
      })
      done()
    },
    videoPlay(index) {
      const videoItem = this.$refs[`video${index}`][0]
      videoItem &&
        this.imgVideoList.map((item, inx) => {
          if (item.type === 'video' && inx !== index) {
            this.$refs[`video${inx}`][0].pause()
          }
        })
    },
    pagesizeHandle(val) {
      this.queryParams.pageSize = Number(val)
      this.getJobListFun()
    },
    currentChange(e) {
      this.queryParams.pageNo = Number(e)
      this.getJobListFun()
    },
    open(companyInfo) {
      try {
        if (Array.isArray(JSON.parse(companyInfo.industry))) {
          companyInfo.industry = JSON.parse(companyInfo.industry)[1]
        }
        if (Array.isArray(JSON.parse(companyInfo.companyAddress))) {
          companyInfo.companyAddress = JSON.parse(companyInfo.companyAddress)
        }
        companyInfo.education = getEducationName(companyInfo.education)
      } catch { () => {} }
      try {
        this.imgVideoList = []
        companyInfo.environment = JSON.parse(companyInfo.environment)
        companyInfo.environment.videoList.forEach((v) => {
          this.imgVideoList.push({
            type: 'video',
            url: v?.src ?? v,
            updateTime: v?.updateTime ?? ''
          })
        })
        companyInfo.environment.imgList.forEach((v) => {
          this.imgVideoList.push({
            type: 'img',
            url: v?.src ?? v,
            updateTime: v?.updateTime ?? ''
          })
        })
      } catch { () => {} }
      this.companyInfo = companyInfo
      this.imgList = companyInfo.environment.imgList
      this.drawer = true
      setTimeout(() => {
        this.initSwiper()
      })
    },
    initSwiper() {
      if (this.swiper === null) {
        this.swiper = new Swiper('#mySwiper', {
          slidesPerView: 'auto',
          spaceBetween: 25,
          observer: true,
          observeParents: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        })
      }
    },
    slidePrev() {
      this.swiper.slidePrev()
    },
    slideNext() {
      this.swiper.slideNext()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-image__error,
.el-image__inner,
.el-image__placeholder {
  padding-top: 66.66%;
}
.pc-review-page {
  position: relative;
  background: #fff;
  padding: 0 40px;
  .company-info {
    position: relative;
    height: 253px;
    width: 100%;
    border-bottom: 1px solid #d4d6da;
    .logo-img {
      display: block;
      width: 144px;
      height: 144px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #d4d6da;
      float: left;
      margin-right: 30px;
    }
    .right-block {
      position: relative;
      overflow: hidden;
      width: calc(100% - 174px);
      height: 144px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: flex-start;
      .name {
        font-size: 50px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 70px;
        margin-bottom: 12px;
      }
      .area {
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 45px;
      }
    }
    .right-hire {
      position: absolute;
      top: 0;
      right: 0;
      width: 40%;
      height: 100%;
      padding-top: 8px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: flex-end;
      .hire-num {
        font-size: 46px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 25px;
        padding-right: 15px;
      }
      .hire-title {
        font-size: 26px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 22px;
        margin-bottom: 38px;
      }
      .btn {
        width: 207px;
        height: 63px;
        line-height: 63px;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #3d6cb0;
        text-align: center;
        border-radius: 63px;
        cursor: pointer;
        margin-bottom: 12px;
        .edit-icon {
          display: inline-block;
          width: 25px;
          height: 27px;
          background: url("../../../../assets/images/edit-icon.png") no-repeat center
            center / cover;
        }
        &:hover {
          color: #2f8efe;
        }
      }
      .click-num {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 22px;
        padding-right: 41px;
      }
    }
    .tag {
      position: absolute;
      left: 0;
      bottom: 23px;
      width: 50%;
      height: 30px;
      padding-left: 10px;
      .item {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 24px;
        margin-right: 45px;
        vertical-align: bottom;
        cursor: pointer;
      }
      .item:hover {
        color: #2f8efe;
      }
      .current {
        font-size: 30px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2f8efe;
        line-height: 30px;
      }
    }
  }
  .row-item {
    position: relative;
    width: 100%;
    padding: 32px 0 45px;
    border-bottom: 1px solid #d4d6da;
    overflow-x: hidden;
    &:last-child {
      border-bottom: 1px solid #fff;
    }
    .title {
      position: relative;
      text-align: left;
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 40px;
      margin-bottom: 25px;
      .all {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2f8efe;
        line-height: 33px;
        vertical-align: bottom;
        cursor: pointer;
        .all-icon {
          display: inline-block;
          width: 32px;
          height: 32px;
          background: url("../../../../assets/images/check_all.png") no-repeat center
            center / cover;
          vertical-align: bottom;
          margin-right: 15px;
        }
      }
    }
    .job-item {
      position: relative;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #d4d6da;
      padding: 25px;
      cursor: pointer;
      .job-name {
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 35px;
        .salary {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 40px;
          float: right;
        }
      }
      .other {
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 30px;
        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 12px;
        }
      }
      &:hover {
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        .job-name {
          color: #2f8efe;
        }
      }
    }
    .company-desc {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 38px;
    }
    .company-environment {
      width: 100%;
      height: 100%;
      position: relative;
      .swiper-slide {
        width: 500px;
        height: 280px;
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        object-fit: cover;
        padding-top: 66.66% !important;
      }
      .swiper-slide .video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .swiper-button-next {
        position: absolute;
        right: -50px;
        top: 50%;
        margin: 0;
        transform: translateY(-50%);
        width: 180px;
        height: 180px;
        background: url(../../../../assets/images/next.png) no-repeat;
        background-position: center;
        background-size: cover;
        cursor: pointer;
        z-index: 5;
      }
      .swiper-button-prev {
        position: absolute;
        left: -50px;
        top: 50%;
        margin: 0;
        transform: translateY(-50%);
        width: 180px;
        height: 180px;
        background: url(../../../../assets/images/prev.png) no-repeat;
        background-position: center;
        background-size: cover;
        cursor: pointer;
        z-index: 5;
      }
    }
    .company-address {
      position: relative;
      .item {
        font-size: 26px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        margin-top: 35px;
        line-height: 37px;
        cursor: pointer;
        &:first-child {
          margin-top: 0;
        }
        .position-icon {
          display: inline-block;
          width: 24px;
          height: 29px;
          margin-right: 15px;
          background: url("../../../../assets/images/position.png") no-repeat center
            center / cover;
          vertical-align: middle;
        }
      }
    }
  }
  .condition-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url("../../../../assets/images/condition.png") no-repeat center center /
      cover;
    vertical-align: middle;
    margin-right: 10px;
  }
  .job-list {
    position: relative;
    .item {
      position: relative;
      width: 100%;
      height: 192px;
      margin-bottom: 25px;
      border-radius: 10px;
      padding: 35px 0 0 52px;
      border: 1px solid #d4d6da;
      overflow: hidden;
      &::before {
        content: "";
        display: block;
        width: 20px;
        height: 100%;
        background: #4677b9;
        position: absolute;
        top: 0;
        left: 0;
      }
      .job-name {
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 50px;
        margin-bottom: 23px;
        .city {
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 42px;
          vertical-align: bottom;
          margin-left: 25px;
        }
      }
      .other {
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 30px;
        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 18px;
        }
      }
      .btn {
        position: absolute;
        width: 174px;
        height: 60px;
        line-height: 60px;
        background: #4677b9;
        border-radius: 4px;
        right: 30px;
        top: 50%;
        margin-top: -30px;
        text-align: center;
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        cursor: pointer;
      }
      &:hover {
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        .job-name {
          color: #2f8efe;
        }
      }
    }
  }
}
.bottom-page {
  margin-top: 50px;
  text-align: center;
}
::v-deep .el-input--suffix .el-input__inner,
::v-deep .el-input--prefix .el-input__inner,
.el-link.el-link--primary {
  font-size: 20px;
}
</style>
